<!--
顶部加载栏
props:
loaded: 是否加载完成
-->
<template>
  <transition :duration="1000">
    <div class="container" :style="'width:'+width+'%'" v-show="!loaded">
    </div>
  </transition>
</template>
<style lang="less" scoped>
  @import url('../../style/mixin.less');
  @import url('./theme.less');
  .container {
    height: @top-load-height;
    background: @top-load-color;
    position: fixed;
    left: 0;
    top: 0;
    .transition(1s);
  }

</style>
<script>
  export default {
    data() {
      return {
        width: 2
      }
    },
    props: {
      loaded:{
          required: true,
          type: Boolean,
          default: false,
      }
    },
    watch: {
      width: function () {
        let that = this
        setTimeout(() => {
          that.width < 100 ? that.width += 2 : ''
        }, 1000);
      },
      loaded: function () {
        if (this.loaded) {
          this.width = 100
        }
        else{
            this.width = 2
        }
      }
    },
    mounted: function () {
      let that = this
      setTimeout(() => {
        that.width < 100 ? that.width += 2 : ''
      }, 1000);
    }
  }

</script>
